Ext.require(['Ext.tab.*', 
			'Ext.window.*', 
			'Ext.tip.*',
			'Ext.layout.container.Border',
			'Ext.toolbar.Toolbar']);

Ext.onReady(function() {
	
	var start_menu = Ext.create('Ext.panel.Panel', {
	    title: 'Main menu',
	    width: 200,
	    height: 200,
	    layout:{type:'vbox',align:'center'},
	    //collapsible: true,
	    region:'west',
	    items:[{
	    		xtype:'button',
	    		text:'Dang nhap',
	    		handler: function(){
	    			openLoginForm();	    			
	    		}
	    	}	    	
	    ]
	    
	});	
	

	Ext.create('Ext.container.Viewport', {
	    layout: 'border',
	    items: [ start_menu , {
		        region: 'south',
		        xtype: 'toolbar',
		        items:[{
		        		xtype:'button',
		        		text:'Start',
		        		handler: function(){
		        			if (start_menu.isVisible()){
		        				start_menu.hide();
		        			}else{
		        				start_menu.show();		        				
		        			}		        			
		        		}
		        	}
		        ]
		        	        
		    }]
	});
	
	
	
	

});

function openLoginForm(){
		//Tao panel voi 2 field2
		//var login_form = Ext.create
		var form = Ext.create('Ext.form.Panel',{
			bodyPadding: 10,
			border: false,
			defaultType: 'textfield',	
			items: [{
					fieldLabel: 'Username',
					name: 'username',
					allowBlank: false,
					id: 'txtuser'
				}, {
					fieldLabel: 'Password',
					name: 'password',
					inputType: 'password',
					allowBlank: false,
					id: 'txtpass'
				}],
				buttons: [{
					text: 'Login',
					formBind: true,
					disabled: true,
					handler: isValidUser
					
				
			}]
		});
		Ext.create('Ext.window.Window', {
							    title: 'Dang nhap',
							    height: 150,
							    width: 300,
							    layout: 'fit',
							    //url: 'save-form.php',
							    
							    items:[form]
							    
							}).show();
}

function isValidUser(){

	
			   var userget=Ext.getCmp('txtuser').value;
			   var passget=Ext.getCmp('txtpass').value;				
				Ext.Ajax.request({
				    url: 'server/login.php',
				    params: {
				        username: userget,
						password:passget
				    },
				    success: function(response){
				        var text = response.responseText;				
						 Ext.Msg.alert('Message', text);				
				    }
				});
				
			
}

